<template>
  <div>
    <div>{{ user.username }}</div>
    <button @click="update">update</button>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect, reactive } from 'vue'
const count = ref(111)
const user = reactive({
  username: 'jack'
})

const printNumAsync = (v: string) => {
  return setTimeout(() => {
    console.log('打印新值' + v)
  }, 2000)
}
watchEffect((onCleanup) => {
  const timer = printNumAsync(user.username)
  onCleanup(() => {
    clearTimeout(timer)
  })
  console.log('watchEffect执行了', count.value, user.username)
})
const update = () => {
  // count.value += 1
  user.username += '❤️'
}
</script>

<style scoped>
</style>
